import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter , Link } from 'react-router-dom';
import styles from './style.module.scss'
class MusicScoreCard extends PureComponent {
    render () {
        const { data , state } = this.props; 
        return (
            <Link className={styles['card']} target="_blank" to={{
                pathname: "/scoreParticulars",
                search: `score_id=${data['id']}&state=${state}`
              }}>
                <div className={styles['card-img']} style={{backgroundImage: `url(${data['singerImg'] ? data['singerImg'] : 'https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/image/img_baise_book%402x.png'})` }}></div>
                <div className={styles['card-name']}>{data['name']}</div>
                <div className={styles['card-btm']}>
                    <div className={styles['singer']}>{data['singer']}</div>
                    <div className={styles['hot-num']}><img src="http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/icon/icon_redu_gray%402x.png" alt="热度"/>{data['hot']}</div>
                </div>
            </Link>
        )
    }
}

const mapState = (state) => ({

});

const mapDispatch = (dispatch) => ({

});


export default connect(mapState, mapDispatch)(withRouter(MusicScoreCard));